<html lang="zh-cmn-Hans"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="HandheldFriendly" content="true">
    <meta name="MobileOptimized" content="320">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="Description" content="QQ会员-动漫特权">
    <meta name="Keywords" content="Tencent,QQ会员,腾讯,特权,动漫">
    <meta itemprop="name" content="动漫特权">
    <meta name="description" itemprop="description" content="动漫特权">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="动漫特权">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <title>QQ会员动漫</title>
    <link rel="stylesheet" href="css/style.css?v=1">
  </head>
  <body class="panorama">
    
    <section class="wrapper show">
      
      <div class="main" id="main"><div style="position: absolute; transform-style: flat; top: 0px; left: 0px; width: 431px; height: 635px; perspective: 414px; overflow: hidden; transform-origin: 50% 50% 0px; opacity: 1; display: block;"><div style="position: absolute; transform: translate3d(-50%, -50%, 0px) translate3d(216px, 318px, 414px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1); transform-style: preserve-3d;"><div style="position: absolute; transform: translate3d(-50%, -50%, 0px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1); transform-style: preserve-3d;"><div style="position: absolute; transform: translate3d(-50%, -50%, 0px) translate3d(0px, -100px, -600px) rotateX(0deg) rotateY(50deg) rotateZ(0deg) scale3d(1, 1, 1); transform-style: preserve-3d; transform-origin: 50% 50% 0px; opacity: 1; display: block;"><div data-name="actors" style="position: absolute; transform: translate3d(-50%, -50%, 0px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1); transform-style: preserve-3d; transform-origin: 50% 50% 0px; opacity: 1; display: block;"><div data-name="part1" style="position: absolute; transform: translate3d(-50%, -50%, 0px) translate3d(-919.25px, 0px, 771.35px) rotateX(0deg) rotateY(-230deg) rotateZ(0deg) scale3d(2, 2, 2); transform-style: preserve-3d; transform-origin: 50% 50% 0px; opacity: 1; display: block;"><div data-name="actor" style="position: absolute; transform: translate3d(-50%, -50%, 0px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1); transform-style: preserve-3d; width: 750px; height: 930px; background-image: url(&quot;img/banner2.png&quot;); backface-visibility: hidden; transform-origin: 50% 50% 0px; opacity: 1; display: block;"></div><div data-name="info" style="position: absolute; transform: translate3d(-50%, -50%, 0px) translate3d(0px, -380px, 10px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(0, 0, 1); transform-style: preserve-3d; width: 750px; height: 322px; background-image: url(&quot;img/title2.png&quot;); backface-visibility: hidden; transform-origin: 50% 50% 0px; opacity: 0; display: block;"></div></div><div data-name="part2" style="position: absolute; transform: translate3d(-50%, -50%, 0px) translate3d(-771.35px, 0px, -919.25px) rotateX(0deg) rotateY(-320deg) rotateZ(0deg) scale3d(2, 2, 2); transform-style: preserve-3d; transform-origin: 50% 50% 0px; opacity: 1; display: block;"><div data-name="actor" style="position: absolute; transform: translate3d(-50%, -50%, 0px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1); transform-style: preserve-3d; width: 750px; height: 930px; background-image: url(&quot;img/banner4.png&quot;); backface-visibility: hidden; transform-origin: 50% 50% 0px; opacity: 1; display: block;"></div><div data-name="info" style="position: absolute; transform: translate3d(-50%, -50%, 0px) translate3d(0px, -380px, 10px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(0, 0, 1); transform-style: preserve-3d; width: 750px; height: 322px; background-image: url(&quot;img/title4.png&quot;); backface-visibility: hidden; transform-origin: 50% 50% 0px; opacity: 0; display: block;"></div></div><div data-name="part3" style="position: absolute; transform: translate3d(-50%, -50%, 0px) translate3d(919.25px, 0px, -771.35px) rotateX(0deg) rotateY(-50deg) rotateZ(0deg) scale3d(2, 2, 2); transform-style: preserve-3d; transform-origin: 50% 50% 0px; opacity: 1; display: block;"><div data-name="actor" style="position: absolute; transform: translate3d(-50%, -50%, 0px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1); transform-style: preserve-3d; width: 750px; height: 930px; background-image: url(&quot;../img/banner5.png&quot;); backface-visibility: hidden; transform-origin: 50% 50% 0px; opacity: 1; display: block;"></div><div data-name="info" style="position: absolute; transform: translate3d(-50%, -50%, 0px) translate3d(0px, -380px, 10px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1); transform-style: preserve-3d; width: 750px; height: 322px; background-image: url(&quot;../img/title5.png&quot;); backface-visibility: hidden; transform-origin: 50% 50% 0px; opacity: 1; display: block;"></div></div><div data-name="part4" style="position: absolute; transform: translate3d(-50%, -50%, 0px) translate3d(771.35px, 0px, 919.25px) rotateX(0deg) rotateY(-140deg) rotateZ(0deg) scale3d(2, 2, 2); transform-style: preserve-3d; transform-origin: 50% 50% 0px; opacity: 1; display: block;"><div data-name="actor" style="position: absolute; transform: translate3d(-50%, -50%, 0px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1); transform-style: preserve-3d; width: 750px; height: 930px; background-image: url(&quot;img/banner1.png&quot;); backface-visibility: hidden; transform-origin: 50% 50% 0px; opacity: 1; display: block;"></div><div data-name="info" style="position: absolute; transform: translate3d(-50%, -50%, 0px) translate3d(0px, -380px, 10px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(0, 0, 1); transform-style: preserve-3d; width: 750px; height: 322px; background-image: url(&quot;img/title1.png&quot;); backface-visibility: hidden; transform-origin: 50% 50% 0px; opacity: 0; display: block;"></div></div></div></div></div></div></div></div>
      <div class="footer">
        <button class="btn">开通超级会员</button>
        <p>去QQ动漫逛逛</p>
      </div>
      
    </section>
    <div class="ui-dialog">
      <div class="ui-dialog-cnt">
        <div class="ui-dialog-bd">
          <h3>购买成功</h3>
          <p>恭喜你成功购买会员，可前往动漫看看哦！</p>
        </div>
        <div class="ui-dialog-ft">
          <button type="button" data-role="button">取消</button>
          <button type="button" data-role="button">查看</button>
        </div>
      </div>
    </div>
    <div class="ui-dialog">
      <div class="ui-dialog-cnt">
        <div class="ui-dialog-bd">
          <h3>购买失败</h3>
          <p>抱歉，开通超级会员失败，请尝试重新开通。</p>
        </div>
        <div class="ui-dialog-ft">
          <button type="button" data-role="button">取消</button>
          <button type="button" data-role="button" class="btn-blue">查看</button>
        </div>
      </div>
    </div>
    <div class="scene"></div>
    <script src="http://i.gtimg.cn/vipstyle/vas/sng_travel/js/zepto.min.js"></script>
    <script src="js/bone.min.js"></script>
    <script src="js/css3d.min.js"></script>
    <script src="js/orienter.min.js"></script>
    <script src="js/jstween.min.js"></script>
    <script src="js/motion.js"></script>
    <script src="js/app/gesture.js"></script>
    <script src="js/app/pano.js"></script>
    <script src="js/app/main.js"></script>
    <script>
    // 资源加载器
    var resList = [
      'img/first_page.png',
      'img/first_page_bg.jpg',
      'img/banner1.png',
      'img/banner2.png',
      'img/banner4.png',
      'img/banner5.png',
      'img/title1.png',
      'img/title2.png',
      'img/title4.png',
      'img/title5.png',
      'img/bg.jpg',
      'img/tips.png'
    ];
    var $num = $('.loading-num'),
      $progress = $('.progress span'),
      loader = new mo.Loader(resList,
      {
        loadType: 1,
        minTime: 80,
        onLoading: function(count, total)
        {
          $num.text(Math.floor((count / total) * 100) + '%');
          $progress.css('width', Math.floor((count / total) * 100) + '%');
        },
        onComplete: function(time)
        {
          pageInit(true); // 加载完成进入页面(是否跟随设备自动转动)
        }
      });
    </script>
  
</body></html>